<template>
    <layout title="我的余额" :contentPadding="'0'">
        <van-sticky :offset-top="48">
            <div class="balance-container-top">
                <div class="suer-header-name display-flex">
                    <div class="suer-picture">
                        <van-image width="11.2vw" height="11.2vw" fit="cover" :src="pictureImage" />
                    </div>
                    <div class="header-name-content">
                        <div class="suer-name">张三 <span class="shop-image"><van-image width="10.266667vw" height="4.4vw"
                                    fit="cover" lazy-load :src="shop" /></span> </div>
                        <div class="suer-text">邀请码：JHANZM
                            <span class="suer-text-copy" @click="copyTextToClipboard('JHANZM')"><van-image
                                    width="2.933333vw" height="3.333333vw" fit="cover" lazy-load :src="copy" /></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shop-card">
                <van-row>
                    <van-col span="8">
                        <div class="text-tc text-card">
                            <p class="text-title font-size-28">今日收益</p>
                            <p class="text-num font-size-30 text-red">0.00</p>
                        </div>
                    </van-col>
                    <van-col span="8">
                        <div class="text-tc text-card">
                            <p class="text-title font-size-28">已提货金额</p>
                            <p class="text-num font-size-30 text-red">0.00</p>
                        </div>
                    </van-col>
                    <van-col span="8">
                        <div class="text-tc text-card">
                            <p class="text-title font-size-28">总收益</p>
                            <p class="text-num font-size-30 text-red">121541.14</p>
                        </div>
                    </van-col>
                </van-row>
            </div>
            <div class="balance-container-integral display-flex">
                <div class="flex1 integral-text">当前积分：<span class="text-red">0.325</span></div>
                <div class="integral-buton">
                    <van-button type="primary" block size="small" color="linear-gradient(to right,#F07748, #ED1850)"
                        round>转赠</van-button>
                </div>
            </div>
        </van-sticky>
        <div class="balance-container-list">
            <div class="container-list-title text-red">
                积分明细
            </div>
            <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedText" @load="loadMore">
                <balance-list v-for="(item,index) in list" :key="index" :item="item" />
            </van-list>
        </div>
    </layout>
</template>

<script setup>
import { ref, reactive } from 'vue';
import layout from '@/components/Layout/index.vue'
import pictureImage from '@image/User/picture.png'
import copy from '@image/Cart/icon_01.png'
import shop from '@image/User/shop.png'

import BalanceList from './components/BalanceList.vue'

let copyTextToClipboard = (text, name) => {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
            console.log(name + '文本已成功复制到剪切板！‌');
        }).catch(err => {
            console.error(name + '复制文本失败：‌', err);
        });
    } else {
        console.log('浏览器不支持剪切板API！‌');
    }
}

let finishedText = ref('--END--');
const loading = ref(false);
const finished = ref(false);
const list = ref([]);
let loadMore = () => {
    console.log(list.value, '数据')
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }

        loading.value = false;
        if (list.value.length >=10) {
            finished.value = true;
        }
    }, 1000);
}

</script>

<style lang="scss" scoped>
.balance-container-top {
    height: 176px;
    background-color: var(--white);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.suer-header-name {
    margin: 20px;
}

.suer-picture {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
}

.suer-text,
.suer-name {
    height: 42px;
    line-height: 42px;
}

.header-name-content {
    flex: 1;
    margin-left: 20px;
    position: relative;
    z-index: 20;
}

.suer-text-copy {
    padding: 0 20px;
}

.shop-image {
    width: 77px;
    height: 33px;
}

.shop-card {
    margin: 0 20px;
    height: 156px;
    background: linear-gradient(to right, #FFE8E8, #D2E2FB);
    margin-top: -50px;
    border-radius: 5px;
    padding: 0 10px;

    .text-title {
        margin-top: 20px;padding: 15px 0;

    }

    .text-num {
        padding: 10px 0;
    }
}
.balance-container-integral{
    padding: 20px 0;height: 60px;background-color: var(--bg-color); margin: 0 20px;
}
.integral-text{
    height: 60px;; line-height: 60px; vertical-align: middle;}
.integral-buton{width:120px;height: 60px;}
.balance-container-list{
    margin: 20px;background-color: var(--white);padding: 20px 0;min-height: 400px;
}
.container-list-title{height:40px;line-height: 40px; padding: 0 20px ;}
</style>